<template>
	<u-popup mode="bottom" v-model="show" :safe-area-inset-bottom="true" :border-radius="24" :closeable="closeable" @close="$emit('update:visible', false)">
		<view class="popup-title">{{title}}</view>
		<view class="search-box">
			<u-search bg-color="#f7f7f7" search-icon-color="#bbb" placeholder-color="#aaa" placeholder="请输入银行名称" v-model="keyword" @custom="handleQuery" @search="handleQuery"></u-search>
		</view>
		<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="reachBottom">
			<view class="bank-list-box">
				<view class="bank-item flex-between-center" v-for="(item,index) in list" :key="index" @click="change(item)">
					<view class="">{{item.dictLabel || '-'}}</view>
					<view class="checkbox-box">
						<static-image v-if="selected.dictValue==item.dictValue" src="/static/img/common/checkbox-active.png" width="40" height="40"></static-image>
						<static-image v-else src="/static/img/common/checkbox-no.png" width="40" height="40"></static-image>
					</view>
				</view>
				<empty :height="500" text="暂无银行数据" v-if="loading=='nomore' && list.length==0"></empty>
				<u-loadmore :status="loading" v-else/>
			</view>
		</scroll-view>
	</u-popup>
</template>

<script>
	export default {
		name:'SelectBank',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			defaultValue: {
				type: Object,
				default: ()=>({})
			},
			title: {
				type: String,
				default: '选择银行'
			},
			closeable:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				keyword: '',
				selected:{},
				options: [],
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 20
				},
				loading: 'loading',
				show:false
			}
		},
		watch:{
			visible(){
				this.show = this.visible
				if(this.show && this.defaultValue.dictValue){
					this.selected = this.defaultValue
				}
			}
		},
		created() {
			this.getList()
		},
		methods: {
			reachBottom(){
				if(this.loading !== 'nomore'){
					this.queryParams.pageNum++
					setTimeout(()=>{
						this.list.push(...this.options.slice((this.queryParams.pageNum - 1) * this.queryParams.pageSize, this.queryParams.pageNum * this.queryParams.pageSize))
						if(this.queryParams.pageNum===Math.ceil(this.options.length/this.queryParams.pageSize)){
							this.loading = 'nomore'
						}
					},100)
				}
			},
			handleQuery(){
				this.list = []
				this.loading = 'loading'
				this.queryParams.pageNum = 1;
				setTimeout(()=>{
					if(this.keyword){
						this.list = this.options.filter(row=>row.dictLabel.indexOf(this.keyword)>-1)
						this.loading = 'nomore'
					}else{
						this.list = this.options.slice((this.queryParams.pageNum - 1) * this.queryParams.pageSize, this.queryParams.pageNum * this.queryParams.pageSize);
					}
				},200)
			},
			getList(){
				this.$request({
					url: '/system/dict/data/type/bank',
					method: 'get'
				}).then(res => {
					this.options = res.data
					this.list = res.data.slice((this.queryParams.pageNum - 1) * this.queryParams.pageSize, this.queryParams.pageNum * this.queryParams.pageSize);
				})
			},
			change(row){
				this.selected = row
				this.$emit('update:visible', false)
				this.$emit('confirm',row)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box{
		padding: 12rpx 24rpx 24rpx;
		border-bottom: 2rpx solid #F5F5F5;
	}
	.scroll-y{
		background-color: #F5F7FA;
		height: calc(75vh - 90rpx);
		.bank-list-box{
			padding: 24rpx 24rpx 0;
			.bank-item{
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-bottom: 24rpx;
				padding: 28rpx 24rpx;
				font-weight: bold;
				font-size: 30rpx;
			}
		}
	}
</style>
